// 引入样式
//常态化样式,设置适用于大部分浏览器
require("../../assets/css/normalize.css");
//重置样式
require("../../assets/css/reset.css");

//自身样式
require("./my_data.less");
import * as echarts from "echarts";
//引入模块
//引入工具utils.js
const dom = require("../../utils/dom.js");
//引入axios
const axios = require("../../utils/axios.js");

document.addEventListener("DOMContentLoaded", async function () {
	let res = await axios.get("/api/exercise");

	let { sum7Duration, sum7Meter, sum7Calorie, days } = res.data.data;
	// 1.渲染表头数据
	dom.get("#minute").textContent = sum7Duration;
	dom.get("#calorie").textContent = sum7Calorie;
	dom.get("#mileage").textContent = sum7Meter;
	dom.get("#days").textContent = days.length;
	dom.get("#continuous").textContent = days.length;
	// 2.echarts图表
	var myChart1 = echarts.init(dom.get(".chart1"));
	var myChart2 = echarts.init(dom.get(".chart2"));
	var myChart3 = echarts.init(dom.get(".chart3"));
	var myChart4 = echarts.init(dom.get(".chart4"));

	// 绘制图表
	// x轴数据
	let xaxis = days.map((v) => v.date.slice(5));
	// y轴数据
	let yaxis = days.map((v) => v.sumDuration);
	// 3.近7天运动时长
	myChart1.setOption({
		title: {
			text: "近7天运动时长",
			top: 10,
			left: 10,
		},
		grid: {
			top: 60,
			left: 50,
			height: 100,
		},
		xAxis: {
			type: "category",
			data: xaxis,
		},
		yAxis: {
			type: "value",
		},
		series: [
			{
				data: yaxis, //数据序列
				type: "bar",
				showBackground: true,
				backgroundStyle: {
					color: "rgba(180, 180, 180, 0.2)",
				},
			},
		],
		color: ["#83a7d1"],
	});
	// 4.运动分类
	// 跑步
	let day1 = 0;
	days.forEach((v) => (day1 += v.exerciseData[0].duration));

	// 骑行
	let day2 = 0;
	days.forEach((v) => (day2 += v.exerciseData[1].duration));

	// 训练
	let day3 = 0;
	days.forEach((v) => (day3 += v.exerciseData[2].duration));
	myChart2.setOption({
		title: {
			text: "运动分类",
			left: 10,
			top: 10,
		},
		tooltip: {
			trigger: "item",
		},
		legend: {
			orient: "vertical",
			right: 10,
			top: 10,
			containLabel: true,
		},
		series: [
			{
				name: "运动占比",
				type: "pie",
				radius: "70%",
				data: [
					{ value: day1, name: "跑步" },
					{ value: day2, name: "骑行" },
					{ value: day3, name: "训练" },
				],
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: "rgba(0, 0, 0, 0.5)",
					},
				},
				label: {
					position: "inside",
					formatter: "{d}%",
					color: "#fff",
				},
			},
		],
	});
	// 5.近7日运动分类
	// 跑步
	let count1 = days.map((v) => v.exerciseData[0].calorie);
	// 骑行
	let count2 = days.map((v) => v.exerciseData[1].calorie);
	// 训练
	let count3 = days.map((v) => v.exerciseData[2].calorie);
	myChart3.setOption({
		title: {
			text: "近7日运动分类",
			top: 10,
			left: 10,
		},
		tooltip: {
			trigger: "axis",
			axisPointer: {
				// Use axis to trigger tooltip
				type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
			},
		},
		legend: {
			top: 10,
			right: 10,
		},
		grid: {
			left: 2,
			right: "4%",
			bottom: "3%",
			containLabel: true,
		},
		xAxis: {
			type: "value",
		},
		yAxis: {
			type: "category",
			data: xaxis,
		},
		series: [
			{
				name: "跑步",
				type: "bar",
				stack: "total",

				data: count1,
			},
			{
				name: "骑行",
				type: "bar",
				stack: "total",

				emphasis: {
					focus: "series",
				},
				data: count2,
			},
			{
				name: "训练",
				type: "bar",
				stack: "total",

				emphasis: {
					focus: "series",
				},
				data: count3,
			},
		],
	});
	// 6.近七日训练次数
	let parcnum = days.map((v) => v.count);
	myChart4.setOption({
		title: {
			text: "近7日训练次数",
			top: 10,
			left: 10,
		},
		grid: {
			height: 100,
		},
		xAxis: {
			type: "category",
			data: xaxis,
		},
		yAxis: {
			type: "value",
		},
		series: [
			{
				data: parcnum,
				type: "line",
			},
		],
	});
});
